// Copyright (C) 2021-2022 Intel Corporation
// Copyright (C) 2024 CVAT.ai Corporation
//
// SPDX-License-Identifier: MIT

import React from 'react';
import { Row } from 'antd/lib/grid';
import Text from 'antd/lib/typography/Text';
import Collapse from 'antd/lib/collapse';

import Icon from '@ant-design/icons';
import { ArrowIcon } from 'icons';
import ItemAttribute from './object-item-attribute';

interface Props {
    readonly: boolean;
    collapsed: boolean;
    attributes: any[];
    values: Record<number, string>;
    collapseLabel: JSX.Element;
    changeAttribute(attrID: number, value: string): void;
    collapse(): void;
}

export function attrValuesAreEqual(next: Record<number, string>, prev: Record<number, string>): boolean {
    const prevKeys = Object.keys(prev);
    const nextKeys = Object.keys(next);

    return (
        nextKeys.length === prevKeys.length &&
        nextKeys.map((key: string): boolean => prev[+key] === next[+key]).every((value: boolean) => value)
    );
}

function attrAreTheSame(prevProps: Props, nextProps: Props): boolean {
    return (
        nextProps.readonly === prevProps.readonly &&
        nextProps.collapsed === prevProps.collapsed &&
        nextProps.attributes === prevProps.attributes &&
        attrValuesAreEqual(nextProps.values, prevProps.values)
    );
}

function ItemAttributesComponent(props: Props): JSX.Element {
    const { collapsed, attributes, values, readonly, collapseLabel, changeAttribute, collapse } = props;

    return (
        <Row className='px-3 pt-3'>
            <Collapse
                className='cvat-objects-sidebar-state-item-collapse'
                activeKey={collapsed ? [] : ['details']}
                onChange={collapse}
                expandIconPosition='end'
                collapsible='icon'
                expandIcon={({ isActive }) => (
                    <Icon component={ArrowIcon} className={isActive ? 'rotate-0' : 'rotate-180'} />
                )}
                items={[
                    {
                        key: 'details',
                        label: collapseLabel,
                        children: (
                            <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                                {attributes.map(
                                    (attribute: any): JSX.Element => (
                                        <Row
                                            key={attribute.id}
                                            align='middle'
                                            justify='start'
                                            className='cvat-object-item-attribute-wrapper '
                                            gutter={[16, 0]}
                                        >
                                            <ItemAttribute
                                                readonly={readonly}
                                                attrValue={values[attribute.id]}
                                                attrInputType={attribute.inputType}
                                                attrName={attribute.name}
                                                attrID={attribute.id}
                                                attrValues={attribute.values}
                                                changeAttribute={changeAttribute}
                                            />
                                        </Row>
                                    ),
                                )}
                            </div>
                        ),
                    },
                ]}
            />
        </Row>
    );
}

export default React.memo(ItemAttributesComponent, attrAreTheSame);
